<template>
  <div class="lessonhurg">
    <van-tabs v-model="active" @click="changetype" color="#187a72" title-active-color="#187a72" title-inactive-color="black"  style="margin-bottom: 6px">
      <van-tab title="最新购买">
      </van-tab>
      <van-tab title="最近学习">
      </van-tab>
    </van-tabs>
    <scroll class="wrapper" :data="buy" :pullup="pullup" :pulldown="pulldown" @pulldown="loadData"  @pullup="nextpage">
      <div  v-if="haveorno == 1">
        <LessonList :mainlist="buy" :buyorlearn="active"></LessonList>
        <PageTip :tipshow="tipshow" ></PageTip>
      </div>
      <Nothing v-if="haveorno == 0">
        <template #texttip>你还没有任何课程</template>
        <template #imgtip><img src="./../../assets/img/noanylesson.png" alt=""></template>
      </Nothing>
      <GuangGuang v-if="haveorno == 0"></GuangGuang>
    </scroll>

  </div>
</template>

<script>
import LessonList from './components/LessonList'
import Tabbar from '@/components/Tabbar'
import GuangGuang from './../MyDiscount/components/GuangGuang'
import Nothing from './../MyDiscount/components/Nothing'
import Scroll from "@/components/Scroll"
import PageTip from "./../MoreBoom/components/PageTip"
import { Tab, Tabs } from 'vant'
import Vue from 'vue'
import { getLatelyData } from '@/api/fetch'
Vue.use(Tab).use(Tabs)

export default {
  name: 'Lesson',
  data () {
    return {
      haveorno: 1,
      tipshow:1,
      page:1,
      pullup:true,
      pulldown:true,
      type: 'order',
      active: 0,
      buy: [],
    }
  },
  methods: {
    loadData(){
      this.getLatelyData(1).then(res => {
        if (res.data.length > 0) {
          this.haveorno = 1
          this.buy = res.data
        } else {
          this.haveorno = 0
        }
      })
    },
    nextpage(){
      this.page=this.page+1
      this.getLatelyData(this.page).then(res=>{
        if(res.data.length > 0){
          this.buy = this.buy.concat(res.data)
        }else {
          this.page=this.page-1
          this.tipshow = 0
        }
      })
    },
    changetype (index, title) {
      if (index == 0) {
        this.type = 'order'
        this.active = 0
      } else {
        this.type = 'study'
        this.active = 1
      }
      this.loadData()
    },

    async getLatelyData (thepage) {
      const res = await getLatelyData({
        page: thepage,
        type: this.type
      })
      console.log(res)
      return  res
    }
  },
  components: {
    LessonList,
    Tabbar,
    Nothing,
    GuangGuang,
    PageTip,
    Scroll
  },
  activated () {
    this.loadData()
  },
  created () {

  }
}
</script>

<style lang="less" scoped>
  @import '~less/variable.less';
  @import '~less/mixins.less';
.lessonhurg{
  .wrapper{
    height: 80vh;
    overflow: hidden;
  }
  .h100();
  .guangguang{
    display: block;
    margin: 0 auto ;
    width: 100px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    font-size: 14px;
    border-radius: 4px;
    background: #187a72;
    color: white;
  }
}
  .wrapper {
    height: 100vh;
    overflow: hidden;
  }
</style>
